/**
 * 拖拽精灵
 * on & off 取代 addEventListener & removeEventListener 
 * @param {*} app 
 * @param {*} robot 
 */

import { nextTick } from "@vue/runtime-core";

let webgl, selectedTarget, isDrag = false, spirit, emitter;

export const drag = (gl, app, robot, emit) => {
  emitter = emit
  spirit = robot
  webgl = gl
  gl.stage.interactive = true;
  // 确保阶段在交互时捕获所有事件
  gl.stage.hitArea = gl.renderer.screen;
  app.hitArea = gl.renderer.screen;

  nextTick(() => {
    // 处理画布上的单击
    // gl.stage.on('click', onClick);

    // 处理精灵的单击
    robot.on('click', onClick);

    robot.on('pointerdown', onDragStart);
    robot.on('pointerup', onDragEnd);
    robot.on('pointerupoutside', onDragEnd);
  })

}

function onDragStart (e) {
  isDrag = false
  e.target.alpha = 0.5;
  selectedTarget = e.target;

  // 开始监听精灵的拖动
  webgl.stage.on('pointermove', onDragMove);
}

// 释放dragTarget 精灵时恢复其alpha和注销侦听器
function onDragEnd () {
  if (isDrag) {
    spirit.on('click', () => {
      return false
    });
    emitter('spilt-drag', 'drag')
  } else {
    emitter('spilt-click', 'click')
  }
  // 修改精灵透明度
  selectedTarget.alpha = 1;
  // 停止拖拽
  webgl.stage.off('pointermove', onDragMove);
}

// 将光标的位置复制到dragTarget的位置
function onDragMove (e) {
  isDrag = true
  // 不要使用 e.target，因为如果用户快速拖动，指针可能会移出精灵
  selectedTarget.parent.toLocal(e.data.global, null, selectedTarget.position);
}

// 点击事件
function onClick (e) {
  if (selectedTarget) {
    selectedTarget.position.copyFrom(e.data.global);
  }
}